import React from 'react';
import { getEmployeeList } from '@/pages/Task/services';
import { Select, Spin } from 'antd';

const SelectEmployee = ({ getChildByOrganizationCode, ...restProps }) => {
    const [data, setData] = React.useState([]);
    const [loading, setLoading] = React.useState(false);
    const codes = Array.isArray(getChildByOrganizationCode) ? getChildByOrganizationCode : [getChildByOrganizationCode];
    const [companyCode] = codes;
    const fetchData = async () => {
        setLoading(true);
        const response = await getEmployeeList(companyCode);
        if (response.code === 10000) {
            setData(response.data);
        }
        setLoading(false);
    };

    React.useEffect(() => {
        fetchData();
    }, []);

    const renderOptions = () =>
        data.map(item => (
            <Select.Option key={item.employeeCode} value={item.employeeCode} label={item.employeeName}>
                {item.employeeName}
            </Select.Option>
        ));

    return (
        <Spin spinning={loading}>
            <Select mode="multiple" maxTagCount={5} {...restProps} optionFilterProp="label">
                {renderOptions()}
            </Select>
        </Spin>
    );
};

export default React.memo(SelectEmployee);
